<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport'>
    <style>
    </style>
</head>
<#include "../head.html" parse=true/>
<body>
<!-- Content Wrapper. Contains page content -->
<div class="content-wrapper">
    <!-- Content Header (Page header) -->
    <section class="content-header">
        <h1>
            <small>系统管理>>用户管理</small>
        </h1>
    </section>
    <section class="content">
        <div class="row">
            <div class="col-xs-12">

                <div class="box">
                    <div class="box box-info">
                        <div class="box-header with-border">
                            <h3 class="box-title">请选择查询要素</h3>
                        </div>
                        <!-- /.box-header -->
                        <!-- form start -->
                        <form class="form-horizontal">
                            <div class="box-body">
                                <div class="form-group">

                                    <label class="col-sm-1 control-label" for="groups">用户组</label>
                                    <div class="col-sm-3">
                                        <select id="groups"  class='selectpicker form-control' data-style='btn-success' >
                                            <option value="-1">全部</option>
                                        </select>
                                    </div>

                                    <label class="col-sm-1 control-label">用户名</label>
                                    <div class="col-sm-3">
                                        <input type="text" class="form-control" id="username" placeholder="username">
                                    </div>

                                    <label class="col-sm-1 control-label" for="status">用户状态</label>
                                    <div class="col-sm-3">
                                        <select class="form-control" id="status">
                                            <option value="-1">全部</option>
                                            <option value="1">正常</option>
                                            <option value="2">锁定</option>
                                            <option value="3">异常</option>
                                        </select>
                                    </div>

                                </div>

                            </div>
                            <!-- /.box-body -->
                            <div class="box-footer">
                                <a class="btn btn-info" id="query" style="margin-left:50%">查询</a>&nbsp;&nbsp;
                                <a class="btn btn-success" id="reset">重置</a>&nbsp;&nbsp;
                            </div>
                            <!-- /.box-footer -->
                        </form>
                    </div>


                    <div class="box-header">
                        <h3 class="box-title">用户列表</h3>
                    </div><!-- /.box-header -->
                    <div class="box-body" id="userList">

                    </div><!-- /.box-body -->
                </div><!-- /.box -->
            </div><!-- /.col -->
        </div><!-- /.row -->
    </section>






</div>

<#include "../foot.html" parse=true/>


<!-- page script -->
<script type="text/javascript">
    $(function () {

        $.getJSON('${request.contextPath}/user/getUserGroups', function (data) {
            //此处返回的data已经是json对象
            //以下其他操作同第一种情况
            $.each(data, function (i, item) {
                $("#groups").append('<option value="' + item.id + '" >' + item.remark + '</option>');
            });

            $("#groups").selectpicker('refresh');
        });

        $("#close_modal").click(function () {

            $('#modal').modal('hide');

        });


        $("#add").click(function () {
            location.href = "add";
        });

    });


    $("#query").click(function () {

        $(".ajaxLoading").fadeIn(10);

        var userName = $("#username").val();
        var status = $("#status").val();
        var groups = $("#groups").val();

        $("#userList").empty();


        $.getJSON('${request.contextPath}/user/getList', {userName: userName,groups:groups,status:status}, function (data) {
            //此处返回的data已经是json对象

            var tableContent = "<table id='userTable' class='table table-bordered table-hover'>"
                    + "<thead><tr><th width=20% style='text-align: center;'>用户名</th><th width=20% style='text-align: center;' >用户组</th>"
                    + "<th style='text-align: center;' width=10% >状态</th><th style='text-align: center;' width=20% >上次登录IP/地区</th>"
                    + "<th style='text-align: center;' width=10% >操作</th></tr></thead><tbody>";

            var tbodyContent = "";
            $.each(data, function (i, item) {

                var userName = item.userName;
                var status = item.status + "";
                var groupName = item.groupName;
                var id = item.id;
                var groupId = item.groupId;
                var statusCn = "";

                switch (status) {
                    case "1":
                        statusCn = "正常";
                        break;
                    default :
                        statusCn = "异常";
                        break;
                }

                tbodyContent += "<tr><input type='hidden' id='hidGroupName_"+id+"' value='"+groupName+"'>"
                        + "<td >" + userName + "</td>"
                        + "<td id='groupTd_"+id+"' style='text-align: left;' >" + groupName + "<i class='fa fa-pencil-square-o' aria-hidden='true' onclick='changeGroup("+id+","+groupId+")' ></i></td>"
                        + "<td style='font-weight:bold;color:red;text-align: center;'>" + statusCn + "</td>"
                        + "<td ></td>"
                        + "<td id='confirmTd_"+id+"' ></td>"
                        + "</tr>";

            });

            $("#userList").append(tableContent + tbodyContent + "</tbody></table>");

            $('#userTable').DataTable({
                "paging": true,
                "lengthChange": false,
                "searching": false,
                "ordering": true,
                "info": true,
                "autoWidth": true,
                "sProcessing": "正在读取数据..."
            });

            $(".ajaxLoading").fadeOut(1000);



        });//end getJson


    });


    $("#reset").click(function () {
        $("input[type=text]").val("");
    });

    function changeGroup(id,groupId){

        var editTd = $("#groupTd_"+id);
        editTd.empty();

        $.getJSON('${request.contextPath}/user/getUserGroups', function (data) {

            var selectHtml = "<select id='editSelect_"+id+"' data-width='fit' class='selectpicker' data-style='btn-info' >";
            var thisRemark ="";

            $.each(data, function (i, item) {
                if(item.id==groupId){
                    selectHtml+='<option value="' + item.id + '" selected="selected" >' + item.remark + '</option>';
                    thisRemark = item.remark;
                }else{
                    selectHtml+='<option value="' + item.id + '" >' + item.remark + '</option>';
                }
            });

            selectHtml+="</select>";

            editTd.append(selectHtml);

            $("#editSelect_"+id).selectpicker('refresh');

            $("#confirmTd_"+id).append("<a class='btn btn-default' onclick='confirmGroupChange("+id+")'><i class='fa fa-check'></i></a>&nbsp;&nbsp;&nbsp;" +
                    "<a class='btn btn-default'  onclick='cancelChange("+id+","+groupId+")' ><i class='fa fa-times'></i></a>");

        });



    }

    function confirmGroupChange(id){

        var select = $("#editSelect_"+id);

        var selectedGroupId = select.val();
        var selectedText = select.find("option:selected").text();

        $.ajax({
            type:"get",
            url:"${request.contextPath}/user/editGroup",
            data:{userId:id,groupId:selectedGroupId},
            success:function(data){

                if(data=="1"){
                    alert("修改用户组成功!");
                    $("#groupTd_"+id).html(selectedText + "<i class='fa fa-pencil-square-o' aria-hidden='true' onclick='changeGroup("+id+","+selectedGroupId+")' ></i>");
                    $("#confirmTd_"+id).empty();
                }else{
                    alert("修改用户组失败!");
                }

            }

        });

    }

    function cancelChange(id,groupId){

        $("#confirmTd_"+id).empty();
        var groupName =$("#hidGroupName_"+id).val();

        var editHtml=groupName+"<i class='fa fa-pencil-square-o' aria-hidden='true' onclick='changeGroup("+id+","+groupId+")' ></i>";

        $("#groupTd_"+id).html(editHtml);

    }


    function centerModals() {
        $('#modal').each(function (i) {
            var $clone = $(this).clone().css('display', 'block').appendTo('body');
            var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
            top = top > 0 ? top : 0;
            $clone.remove();
            $(this).find('.modal-content').css("margin-top", top);
        });
    }
    $('#modal').on('show.bs.modal', centerModals);
    $(window).on('resize', centerModals);

</script>

</body>
</html>
